var chartDom = document.getElementById('wuzhangtu');
var myChart = echarts.init(chartDom, 'dark');
var option;

var dataGZ = [
    [26,37,27,1.163,27,13,1],
    [85,62,71,1.195,60,8,2],

];

var dataSH = [
    [91,45,125,0.82,34,23,1],
    [65,27,78,0.86,45,29,2],


];

var dataMH = [
    
    ];

var dataMH = [
    
    ];


var lineStyle = {
    normal: {
        width: 2,
        opacity:1,
    }
};

option = {
      graphic: [
           {
           type:"image",
           left:"5%",
           bottom:"91.5%",
           style: {
               image:"https://i.loli.net/2021/06/21/CvlGW8PErboK2YQ.png",
               width:"68",
               height:"45",
            }
         },
         {
           type:"image",
           left:"28%",
           bottom:"0%",
           style: {
               image:"https://i.loli.net/2021/06/20/PlYriL6m1DwkO2I.png",
               width:"50",
               height:"50",
            }
         },
        {
           type:"image",
           left:"78%",
           bottom:"60%",
           style: {
               image:"https://i.loli.net/2021/06/20/86cUlpEBYyWJDRO.png",
               width:"250",
               height:"130",
            }
         },
         ],
    backgroundColor: 'rgba(0,21,46)',
    title: {
        text: '2020年，北京市朝阳区高安屯垃圾焚烧发电厂，各项污染物排放均达标',
        left:'12%',
        top: '3%',
        textStyle: {
            fontSize:20,
            color:"#FFFFFF",
            fontFamily: "Microsoft YaHei",
               },
    },
    legend: {
        bottom: 25,
        data: ['颗粒物', '氮氧化物', '二氧化硫','氯化氢','一氧化碳'],
        itemGap: 20,
        textStyle: {
            color: '#fff',
            fontSize: 14
        },
        selectedMode: 'single'
    },

    radar: {
        indicator: [
            {name: '1月'},
            {name: '2月'},
            {name: '3月'},
            {name: '4月'},
            {name: '5月'},
            {name: '6月'},
            {name: '7月'},
            {name: '8月'},
            {name: '9月'},
            {name: '10月'},
            {name: '11月'},
            {name: '12月'},
        ],
        name: { // (圆外的标签)雷达图每个指示器名称的配置项。
            textStyle: {
                fontSize: 15,
            }
        },
        nameGap: 30,
        shape: 'circle',
        splitNumber: 5,
        radius: 160,
        tooltip: {},
        splitLine: {
            lineStyle: {
                color: [
                    'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
                    'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
                    'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
                ].reverse()
            }
        },
        splitArea: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(238, 197, 102, 0.5)'
            }
        }
    },
    series: [
        {
            name: '颗粒物',
            type: 'radar',
            lineStyle: lineStyle,
            data:[
                  {
                    value:[20,20,20,20,20,20,20,20,20,20,20,20],
                    symbol: 'rect',
                    symbolSize: 5,
                    label: {
                        show: true,
                        padding:-12,
                        inside:true,
                        fontSize:10,
                        formatter: '{c}mg/m³ ',
                    }
                },
                {
                    value:[2.82,3.47,4.62,3.39,2.78,3.58,3.69,4.3,3.56,4.09,3.83,3.78],
                    symbol: 'rect',
                    areaStyle: {
                         color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                { offset: 0, color: 'rgba(136,226,226)' },
                { offset: 1, color: 'rgba(60,111,125)' }
                                           ]),},
                    itemStyle:{
                        color:"rgba(136,226,226)"
                    },
                    emphasis: {
                        areaStyle: {
                             color: 'rgba(136,226,226)'
                            },
                        label: {
                            show: true,
                            color: '#fff',
                            fontSize:10,
                            backgroundColor:"rgba(0,21,46)",
                            padding:1,
                            formatter: '{c}mg/m³ ',
                            shadowBlur: 3
                               },},}
                ],
            itemStyle: {
                color: 'rgba(242,146,104)'
                          },
            symbol: 'none',
        },
        {
            name: '氮氧化物',
            type: 'radar',
            lineStyle: lineStyle,
            data:[
                                  {
                    value:[250,250,250,250,250,250,250,250,250,250,250,250],
                    symbol: 'rect',
                    symbolSize: 5,
                    label: {
                        show: true,
                        padding:-12,
                        inside:true,
                        fontSize:10,
                        formatter: '{c}mg/m³ ',
                    }
                },
                {
                    value:[135.77,127.82,146.06,142.72,130.2,127.5,127.81,122.93,143.85,160.36,154.14,157.21],
                    symbol: 'rect',
                    areaStyle: {
                         color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                { offset: 0, color: 'rgba(136,226,226)' },
                { offset: 1, color: 'rgba(60,111,125)' }
                                           ]),},
                    itemStyle:{
                        color:"rgba(136,226,226)"
                    },
                    emphasis: {
                        areaStyle: {
                             color: 'rgba(136,226,226)'
                            },
                        label: {
                            show: true,
                            color: '#fff',
                            fontSize:10,
                            backgroundColor:"rgba(0,21,46)",
                            padding:1,
                            formatter: '{c}mg/m³ ',
                            shadowBlur: 3
                               },},}
                ],
            symbol: 'none',
            itemStyle: {
                color: 'rgba(242,146,104)'
                          },
        },
        {
            name: '二氧化硫',
            type: 'radar',
            lineStyle: lineStyle,
            data:[
                  {
                    value:[80,80,80,80,80,80,80,80,80,80,80,80],
                    symbol: 'rect',
                    symbolSize: 5,
                    label: {
                        show: true,
                        padding:-12,
                        inside:true,
                        fontSize:10,
                        formatter: '{c}mg/m³ ',
                    }
                },
                {
                    value:[24.3,25.74,3.96,28.63,15.54,31.83,24.57,21.3,5.72,14.31,11.64,1.18],
                    symbol: 'rect',
                    areaStyle: {
                         color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                { offset: 0, color: 'rgba(136,226,226)' },
                { offset: 1, color: 'rgba(60,111,125)' }
                                           ]),},
                    itemStyle:{
                        color:"rgba(136,226,226)"
                    },
                    emphasis: {
                        areaStyle: {
                             color: 'rgba(136,226,226)'
                            },
                        label: {
                            show: true,
                            color: '#fff',
                            fontSize:10,
                            backgroundColor:"rgba(0,21,46)",
                            padding:1,
                            formatter: '{c}mg/m³ ',
                            shadowBlur: 3
                               },},}                
                ],
            
            symbol: 'none',
            itemStyle: {
                color: 'rgba(242,146,104)'
            },
        },
                {
            name: '氯化氢',
            type: 'radar',
            lineStyle: lineStyle,
            data:[
                                                  {
                    value:[50,50,50,50,50,50,50,50,50,50,50,50],
                    symbol: 'rect',
                    symbolSize: 5,
                    label: {
                        show: true,
                        padding:-12,
                        inside:true,
                        fontSize:10,
                        formatter: '{c}mg/m³ ',
                    }
                },
                {
                    value:[6.64,5.34,13.85,12.81,13.9,24.12,24.72,24.5,9.39,11.95,12.88,5.65],
                    symbol: 'rect',
                    areaStyle: {
                         color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                { offset: 0, color: 'rgba(136,226,226)' },
                { offset: 1, color: 'rgba(60,111,125)' }
                                           ]),},
                    itemStyle:{
                        color:"rgba(136,226,226)"
                    },
                    emphasis: {
                        areaStyle: {
                             color: 'rgba(136,226,226)'
                            },
                        label: {
                            show: true,
                            color: '#fff',
                            fontSize:10,
                            backgroundColor:"rgba(0,21,46)",
                            padding:1,
                            formatter: '{c}mg/m³ ',
                            shadowBlur: 3
                               },},}
                ],
            symbol: 'none',
            itemStyle: {
                color: 'rgba(242,146,104)'
            },
        },
                {
            name: '一氧化碳',
            type: 'radar',
            lineStyle: lineStyle,
            data:[
 {
                    value:[80,80,80,80,80,80,80,80,80,80,80,80],
                    symbol: 'rect',
                    symbolSize: 5,
                    label: {
                        show: true,
                        padding:-12,
                        inside:true,
                        fontSize:10,
                        formatter: '{c}mg/m³ ',
                    }
                },
                {
                    value:[5.21,5.02,9.56,11.33,10.49,11.5,19.71,26.57,22.78,24.74,17.6,10.02],
                    symbol: 'rect',
                    areaStyle: {
                         color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                { offset: 0, color: 'rgba(136,226,226)' },
                { offset: 1, color: 'rgba(60,111,125)' }
                                           ]),},
                    itemStyle:{
                        color:"rgba(136,226,226)"
                    },
                    emphasis: {
                        areaStyle: {
                             color: 'rgba(136,226,226)'
                            },
                        label: {
                            show: true,
                            color: '#fff',
                            fontSize:10,
                            backgroundColor:"rgba(0,21,46)",
                            padding:1,
                            formatter: '{c}mg/m³ ',
                            shadowBlur: 3
                               },},}       
                ],
            symbol: 'none',
            itemStyle: {
                color: 'rgba(242,146,104)'
            },
        }
    ]
};

option && myChart.setOption(option);
